<template>
  <view>
    <!-- 专辑背景 开始 -->
    <view class="album_bg">
      <image :src="album.cover" mode="widthFix" />
      <view class="album_info">
        <view class="album_name">{{ album.name }} </view>
        <view class="album_btn">关注专辑 </view>
      </view>
    </view>
    <!-- 专辑背景 结束 -->
    <!-- 专辑作者 开始 -->
    <view class="album_author">
      <view class="author_info">
        <image :src="album.user.avatar" mode="widthFix" />
        <view class="author_name">{{ album.user.name }}</view>
      </view>
      <view class="album_author_desc">
        <text>
          {{ album.desc }}
        </text>
      </view>
    </view>
    <!-- 专辑作者 结束 -->

    <!-- 专辑列表开始 -->
    <view class="album_list">
      <view class="album_item"
       v-for="(item,index) in wallpaper"
       :key="item.id">
        <go-detail :list="wallpaper" :index="index">
          <image :src="item.thumb" mode="aspectFill" />
        </go-detail>
      </view>
    </view>
    <!-- 专辑列表结束 -->
  </view>
</template>

<script>
var walpaperArrayJson = require("./walpaper.json");
var albumJson = require("./album.json");
import goDetail from '../../components/goDetail.vue';


export default {
  data() {
    return {
      params: {
        limit: 30,
        order: "new",
        skip: 0,
        // 1、返回值中有album对象，表示第一次请求数据
        // 0 返回值中只有wallpaper 数组 不是第一次请求
        first: 0,
      },
      id: -1,
      album: {
        name: "",
        user: {
          avatar: "",
          name: "",
        },
        desc: "",
      },
      wallpaper: [],
      hasMore: true,
    };
  },
  onLoad(options) {
    // console.log(options);
    // this.id = "57eb8c3969401b34865de7eb";
    this.id = options.id;
    this.getList();
  },
  components: { goDetail },
  // 页面加载 上啦下载下一页事件
  onReachBottom() {
    if (this.hasMore) {
      this.params.skip += this.params.limit;
      this.getList();
    } else {
      uni.showToast({
        title: "没有更多详情数据了",
        // duration: 2000
      });
    }
  },
  methods: {
    getList() {
      if (this.wallpaper.length > 130) {
        this.hasMore = false;
        return;
      }
      if (this.wallpaper.length === 0) {
        this.album = albumJson;
      }
      // 模拟生成不同那个的id
      for (let index = 0; index < walpaperArrayJson.length; index++) {
        // debugger
        const content = walpaperArrayJson[index];
        content.id = Math.floor(Math.random()*100000000 +1);
      }
      this.wallpaper = [...this.wallpaper, ...walpaperArrayJson];
      // TODO ???此接口没有返回数据，使用上面的mock 数据
        // this.request({
        //   // url: `http://service.picasso.adesk.com/v1/wallpaper/album/${this.id}/wallpaper`, //仅为示例，并非真实接口地址。
        //   url: this.baseUrl2 + `/v1/wallpaper/album/${this.id}/wallpaper`,
        //   data: this.params,
        // }).then((result) => {
        //   // 专辑数据，接口中没有了，此处没有赋值
        //   console.log(result);
        //   // this.album = result.res.album;
        //   // mock数据吧
        //   // this.album.desc = `日出而作，日入而息。凿井而饮，耕田而食。帝力于我何有哉！
        //   // 日出而作，日入而息。凿井而饮，耕田而食。帝力于我何有哉！`;

        // });
    },
  },
};
</script>


<style lang='scss'>
.album_bg {
  position: relative;
  image {
  }

  .album_info {
    position: absolute;
    width: 100%;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    height: 80rpx;
    align-items: center;
    color: #fff;
    padding: 0 15rpx;
    .album_name {
      font-size: 36rpx;
    }

    .album_btn {
      background-color: $color;
      width: 152rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 10rpx;
      border: 3rpx solid #fff;
    }
  }
}

.album_author {
  padding: 10rpx;
  .author_info {
    // ?
    display: flex;
    padding: 10rpx 0;
    image {
      width: 50rpx;
     
      // 增加圆角
      border-radius: 20%;
    }
    .author_name {
      color: #000;
      margin-left: 15rpx;
    }
  }

  .album_author_desc {
  }
}
.album_list {
  display: flex;
  flex-wrap: wrap;
  // padding: 4rpx 0;
  .album_item {
    width: 33.33%;
    border: 5rpx solid #fff;
    padding: 1rpx 0;
    image {
      // height: auto;
      margin: 3rpx 0;
       height: 150rpx;
      // border-radius: 3%;
    }
  }
}
</style>